<template>
  <div class="admin-header">
    <div class="header-content">
      <img src="@/assets/iconfont/设计派单系统 logo.png" alt="设计派单系统" class="logo-img" />
      <h1>管理员控制台</h1>
      <div class="admin-info">
        <span class="login-icon" @click="handleLoginAction">
          <img src="@/assets/iconfont/登录.png" alt="登录" class="login-img" />
        </span>
        <div class="admin-text">
          <span class="admin-name">{{ currentUserInfo.userName || '管理员' }}</span>
          <span class="admin-role">{{ currentUserRole.roleName || '超级管理员' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user'

export default {
  name: 'AdminHeader',
  computed: {
    // 获取当前用户信息
    currentUserInfo() {
      const userStore = useUserStore()
      return userStore.userInfo?.user || {}
    },
    // 获取当前用户角色
    currentUserRole() {
      const userStore = useUserStore()
      // 假设用户只有一个角色，如果有多个角色可以显示主要角色
      return userStore.userInfo?.roles?.[0] || {}
    }
  },
  methods: {
    handleLoginAction() {
      // 登录/退出操作处理逻辑
      if (confirm('确定要退出登录吗？')) {
        console.log('用户已确认退出登录');
        // 添加实际的退出登录逻辑
        // 清除用户信息、跳转到登录页面
        const userStore = useUserStore()
        userStore.clearUserInfo()
        this.$router.push('/login')
      } else {
        console.log('用户取消退出登录');
      }
    }
  }
}
</script>

<style scoped>
.admin-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 100%;
}

.header-content h1 {
  color: #333;
  margin: 0;
  font-size: 1.5rem;
}

.logo-img {
  height: 55px;
  width: auto;
  border-radius: 5px;
}

.admin-info {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 35px;
}

.login-img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.admin-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.admin-name {
  font-weight: bold;
  color: #333;
  font-size: 1rem;
}

.admin-role {
  font-size: 0.8rem;
  color: #666;
}
</style>